<!DOCTYPE html>
<html>
    <head>
        <title>拉新排行榜</title>
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
        <script src="/unpkg/unpkg.vue.js"></script>
        <script src="/unpkg/lib-master/index.js"></script>
        <script src="/unpkg/unpkg.axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="160px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix"><span>活动基础信息</span></div>
                    <el-form-item label="活动名称" prop="title">
                        <el-input v-model="form.title"  maxlength="15" :show-word-limit="true" style="width:400px"></el-input>
                    </el-form-item>
                    <el-form-item label="排行指标">
                        <el-radio-group v-model="form.top_type" @change="radioChange">
                            <el-radio :label="1">邀请客户成为企微客户</el-radio>
                            <el-radio :label="2">根据客户加入群聊</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="新增客户去重">
                        <el-switch v-model="form.is_diff" :active-value="1" :inactive-value="0"></el-switch>
                        <span class="switchText">!{!{form.is_diff ? '已开启':''}}</span>
                    </el-form-item>
                    <el-form-item label="活动时间" prop="dateRange">
                        <el-date-picker
                            v-model="form.dateRange"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    
                    <el-form-item label="选择成员" v-if="form.top_type==1">
                        <el-button type="primary" icon="el-icon-circle-plus" @click="choseUser">添加成员</el-button>
                        <div class="userlist" v-if="selects">
                            <div class="block" v-for="user in selects">
                                <el-avatar shape="square" :size="36" fit="fill" :src="user.thumb_avatar"></el-avatar>
                                <div class="username">!{!{user.name}}</div>
                            </div>
                        </div>
                    </el-form-item>
                    
                    <el-form-item label="选择群聊" v-if="form.top_type==2">
                        <el-button type="primary" icon="el-icon-circle-plus" @click="choseChat">添加群聊</el-button>
                        <div class="chatlist" v-if="chats">
                            <el-tag v-for="chat in chats.slice(0,5)" effect="plain" size="mini" class="user">!{!{ chat.name ? chat.name : '默认群聊' }}</el-tag> 
                            <span v-if="chats.length > 5">等!{!{chats.length}}个群聊</span>
                        </div>
                    </el-form-item>
                    
                    <el-form-item label="上榜名次">
                        <el-input v-model="form.top_times" style="width:60px"></el-input>
                    </el-form-item>
                    <el-form-item label="活动说明">
                        <el-input type="textarea" :rows="5" v-model="form.description" maxlength="150" :show-word-limit="true" style="width:600px" ></el-input>
                    </el-form-item>
                    <div class="title">活动提醒设置</div>
                    <el-form-item label="活动开始/结束提醒">
                        <el-switch v-model="form.is_notice" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item label="每日播报">
                        <el-switch v-model="form.is_dayly" :active-value="1" :inactive-value="0" validate-event></el-switch>
                        <div class="notice" v-if="form.is_dayly">
                            每日<el-time-picker value-format="HH:mm:ss" placeholder="请选择时间" v-model="form.dayly" style="width: 130px;margin:0 10px;"></el-time-picker>向参与成员播报当前排名情况
                        </div>
                    </el-form-item>
                    <el-form-item label="即将上榜提醒">
                        <el-switch v-model="form.is_top" :active-value="1" :inactive-value="0" validate-event></el-switch>
                        <div class="notice" v-if="form.is_top">
                            距离上榜还差<el-input v-model="form.top_count" style="width:60px;margin:0 10px;"></el-input>  名时，向该参与成员发送即将上榜提醒
                        </div>
                    </el-form-item>
                    <el-form-item label="上榜/落榜提醒">
                        <el-switch v-model="form.top_low" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">创建规则</el-button>
                </el-card>
            </el-form>
            <el-dialog title="选择员工" :visible.sync="userModal" width="60%">
                <el-table :data="userData" height="600px" @selection-change="handleSelectionChange" :row-key="(row)=>!{return row.id}">
                    <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="ID" width="100"></el-table-column>
                    <el-table-column label="头像" width="100">
                        <template slot-scope="scope"><img :src="scope.row.thumb_avatar" width="24" height="24"/></template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="mobile" label="手机" width="200"></el-table-column>
                </el-table>
                <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="paged"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                </el-pagination>
            </el-dialog>
            <el-dialog title="选择群聊" :visible.sync="chatModal" width="60%">
                <el-table :data="ChatData" height="600px" @selection-change="handleSelectionChange" :row-key="(row)=>!{return row.id}">
                    <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="ID" width="100"></el-table-column>
                    <el-table-column prop="chat_id" label="群编号"></el-table-column>
                    <el-table-column prop="name" label="群名称"></el-table-column>
                </el-table>
                <el-pagination
                      @current-change="handleCurrentChange"
                      :current-page="paged"
                      layout="total, prev, pager, next, jumper"
                      :total="total">
                </el-pagination>
            </el-dialog>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data() {
                    return {
                        userData:[],
                        userModal: false,
                        total:0,
                        paged:1,
                        selects:[],
                        chats:[],
                        ChatData:[],
                        chatModal:false,
                        form: {
                            title: null,
                            top_type: 1,
                            is_diff: 1,
                            dateRange:[],
                            users:[],
                            chats:[],
                            top_times:100,
                            description:null,
                            is_notice: 1,
                            is_dayly: 1,
                            dayly: null,
                            is_top: 1,
                            top_count: 3,
                            top_low: 1
                        },
                        rules: {
                            title: [
                                { required: true, message: '请输入活动名称', trigger: 'blur' },
                                { max: 15, message: '最大长度15个字符', trigger: 'blur' }
                            ],
                            dateRange:[
                                { required: true, message: '请选择活动时间', trigger: 'blur' }
                            ],
                        }
                    }
                },
                methods: {
                    choseUser(){
                        let loading = this.$loading(!{text: '请稍等...'});
                        axios.get('/Addons/NewPerson/Admin/InviatePerson/getUsers.html',!{params: !{paged: this.paged}}).then( resp => {
                            this.userData = resp.data.data.items
                            this.total = resp.data.data.count
                            this.userModal = true
                            loading.close();
                        }).catch(function (error) {
                            loading.close();
                            this.$message.error('错误'|| error)
                        });
                    },
                    choseChat(){
                        let loading = this.$loading(!{text: '请稍等...'});
                        axios.get('/Addons/NewPerson/Admin/InviatePerson/getChats.html',!{params: !{paged: this.paged}}).then( resp => {
                            this.ChatData = resp.data.data.items
                            this.total = resp.data.data.count
                            this.chatModal = true
                            loading.close();
                        }).catch(function (error) {
                            loading.close();
                            this.$message.error('错误'|| error)
                        });
                    },
                    radioChange(){
                        this.paged = 1
                        this.total = 0
                    },
                    handleSelectionChange(users){
                        this.form.users = []
                        this.form.chats = []
                        if(this.form.top_type==1){
                            this.selects = users.map(item=>{
                                this.form.users.push(item.id)
                                return { id:item.id,name:item.name,thumb_avatar:item.thumb_avatar}
                            })
                        }
                        if(this.form.top_type==2){
                            this.chats = users.map(item=>{
                                this.form.chats.push(item.id)
                                return { id:item.id,name: item.name ? item.name : '默认群聊' }
                            })
                        }
                    },
                    handleCurrentChange(paged){
                        this.paged = paged
                        if(this.form.top_type==1) return this.choseUser()
                        return this.choseChat() 
                    },
                    onSubmit(){
                        let loading = this.$loading(!{text: '请稍等...'});
                        axios({
                            method:'POST',
                            url:'/Addons/NewPerson/Admin/InviatePerson/addActive.html',
                            data: this.form
                        }).then( resp => {
                            loading.close();
                            if(resp.data.status!='success') return this.$message.error(resp.data.msg)
                            this.$message.success('添加成功')
                            window.location.href= 'index.html'
                        })
                    }
                }
            })
        </script>
        <style>
            .el-form-item{
                margin-bottom: 15px;
            }
            .notice{
                margin-top: 20px;
            }
            .switchText{
                padding:0 10px;
            }
            .title{
                position: relative;
                width: calc(100% + 20px);
                border-bottom: 1px solid #e5e5e5;
                left: -20px;
                padding: 0 0 20px 20px;
                margin-bottom: 20px;
            }
            .el-pagination{
                margin-top: 20px;
            }
            .userlist{
                display: flex;
                justify-content: start;
            }
            .userlist .block{
                margin-right: 15px;
                margin-top: 15px;
            }
            .chatlist{
                margin-top: 10px;
            }
            .chatlist .user{
                margin-right: 10px;
            }
        </style>
    </body>
</html>
